<link rel="import" href="../../../html/polymer.html">

<link rel="import" href="cellular_types.html">
<link rel="import" href="../../../html/i18n_behavior.html">
<link rel="import" href="../../../cr_elements/cr_button/cr_button.html">
<link rel="import" href="../../../cr_elements/shared_style_css.html">
<link rel="import" href="../../../cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">

<dom-module id="button-bar">
  <template>
    <style include="iron-flex">
      :host {
        display: flex;
        justify-content: flex-end;
        padding: 10px 0 20px 0;
      }

      #forward:focus {
        box-shadow: 0 0 0 2px var(--focus-shadow-color);
      }

      #flex {
        flex: 1;
      }

    </style>
    <cr-button id="backward"
        class="cancel-button"
        on-click="onBackwardButtonClicked_"
        disabled="[[isButtonDisabled_(Button.BACKWARD, buttonState.*)]]"
        hidden$="[[isButtonHidden_(Button.BACKWARD, buttonState.*)]]">
      [[i18n('back')]]
    </cr-button>
    <div id="flex"></div>
    <cr-button id="cancel"
        class="cancel-button"
        on-click="onCancelButtonClicked_"
        disabled="[[isButtonDisabled_(Button.CANCEL, buttonState.*)]]"
        hidden$="[[isButtonHidden_(Button.CANCEL, buttonState.*)]]">
      [[i18n('cancel')]]
    </cr-button>
    <cr-button id="forward"
        class="action-button"
        on-click="onForwardButtonClicked_"
        disabled="[[isButtonDisabled_(Button.FORWARD, buttonState.*)]]"
        hidden$="[[isButtonHidden_(Button.FORWARD, buttonState.*)]]">
      [[forwardButtonLabel]]
    </cr-button>
  </template>
  <script src="button_bar.js"></script>
</dom-module>
